<template>
	<view class="comment" v-for="(item,index) in goods" :key="index">
		<view class="comment-head">
			<image :src="baseUrl+'/'+item.goodsImage"></image>
			<view class="title">{{item.goodsName}}</view>
		</view>
		<view class="comment-content">
			<view class="comment-score">
				<view>商品评分:</view>
				<uni-rate v-model="item.goodsScore" :touchable="true" />
			</view>	
			<up-textarea v-model="item.goodsCommment" placeholder="你的感受很重要,展开写写吧" count height="3	00"></up-textarea>
		</view>
	</view>
	<view class="commit" @click="commitComment">提交评价</view>
</template>

<script setup>
	import uniRate from '@/uni_modules/uni-rate/components/uni-rate/uni-rate';
	import {
		onLoad
	}
	from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";
	import {
		baseUrl, post
	} from "@/hooks/req";
	const goods = ref([])
	const commitComment=()=>{
		const comments = goods.value.map(item=>({
			orderId:item.order_id,
			userId:uni.getStorageSync("user").id,
			goodsId:item.goodsId,
			score:item.goodsScore,
			content:item.goodsCommment,
		}));
		const hasZeroScores = comments.some(comment => comment.score == 0);
		const hasNullContents = comments.some(comment => comment.content == '');
		if(hasZeroScores){
			uni.showToast({
				title:'有未选择评分',
				icon:'none'
			})
			return
		}
		if(hasNullContents){
			uni.showToast({
				title:'有未填写评价',
				icon:'none'
			})
			return
		}else{
			post("/comment/user",comments,uni.getStorageSync("token")).then(res=>{
			uni.showToast({
				title:res.data.data,
				icon:'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		})
		}
		
	}
	onLoad((e) => {
		const goodsInfo = JSON.parse(decodeURIComponent(e.goodsInfo));
		goods.value = goodsInfo
	})
</script>

<style scoped lang="scss">
.comment{
	border-bottom: 1px solid #eee;
	padding: 10px;
	.comment-head{
		display: flex;
		image{
			height: 100px;
			width: 100px;
		}
		.title{
			margin-top: 5px;
		}
	}
	.comment-content{
		.comment-score{
			display: flex;
		}
	}
}
.commit{
	background-color: #ff6700;
	width: 100%;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 20px;
	color: white
}
</style>